<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no">
  <title>muugyjUI-Toast提示组件</title>
  <link rel="stylesheet" href="../src/muugyj-ui.css">
</head>
<body>
  <div class="gy-content">
    <h1 class="gy-panel-title">Toast提示组件</h1>
    <div class="gy-panel-body">
      <a class="gy-btn btn-primary" id="js-show-toast-loading">加载中提示</a>
      <br>
      <a class="gy-btn btn-primary" id="js-show-toast-success">成功提示</a>
    </div>
  </div>
  <div class="gy-toast" id="js-toast-loading">
    <i class="fa fa-spinner fa-spin gy-toast-icon"></i>
    <p class="gy-toast-info">操作进行中</p>
  </div>
  <div class="gy-toast" id="js-toast-success">
    <i class="fa fa-check gy-toast-icon"></i>
    <p class="gy-toast-info">操作成功</p>
  </div>
  <script>
    // window.onload = () => {
    //   //显示加载中的Toast
    //   document.querySelector('#js-show-toast-loading').onclick = (e) => {
    //     let toastEle = document.querySelector('#js-toast-loading');
    //     toastEle.classList.add('show');
    //     setTimeout(() => {
    //       toastEle.classList.remove('show');
    //     }, 2e3);
    //   };
    //   // 显示操作成功的Toast
    //   document.querySelector('#js-show-toast-success').onclick = e => {
    //     console.log(123)
    //     // let loastEle = document.querySelector('#js-toast-success');
    //     // toastEle.classList.add('show');
    //     // setTimeout(() => {
    //     //   toastEle.classList.remove('show');
    //     // }, 2e3);
    //   }
    // }
    window.onload = ()=>{
        // 显示加载中的Toast
        document.querySelector('#js-show-toast-loading').addEventListener("click", e => {
          let toastEle = document.querySelector('#js-toast-loading');
          toastEle.classList.add('show');
          setTimeout(()=> {
              toastEle.classList.remove('show');
          }, 2e3);
        })
        // 显示操作成功的Toast
        document.querySelector('#js-show-toast-success').addEventListener("click", e=> {
          let toastEle = document.querySelector('#js-toast-success');
          toastEle.classList.add('show');
          setTimeout(()=> {
              toastEle.classList.remove('show');
          }, 2e3);
        })
    };
  </script>
</body>
</html>